<script setup>

import ConsoleAside from "./ConsoleAside.vue";
import {inject, provide, ref} from "vue";

const local_set = inject("local_set")
const menus = ref({
  expanded: true,
  tabs: []
})

provide("menus", menus);
</script>

<template>
    <el-container class="flow-content">
        <el-aside :width="menus.expanded?'230px':'64px'">
            <console-aside/>
        </el-aside>
      <el-container class="flow-content">
        <el-header height="50px">
          <el-row justify="space-between" align="middle" style="height: 100%;width: 100px;">
            <el-page-header @back="$router.back()">
              <template #content>
                <span class="text-large font-600 mr-3"> {{ local_set.current.conf.menu[$route.name] }} </span>
              </template>
            </el-page-header>

          </el-row>
        </el-header>
        <el-main class="console-main" style="padding: 10px;background-color: rgba(0,0,0,.1);overflow: hidden;">
          <router-view v-slot="{ Component }">
            <transition name="slide-fade" mode="out-in">
              <KeepAlive :max="20">
                <component :is="Component"/>
              </KeepAlive>
            </transition>
          </router-view>
        </el-main>
      </el-container>
    </el-container>
</template>

<style scoped>
.flow-tab-content .el-tabs--border-card>.el-tabs__content{
  background: rgba(0,0,0,.2);
}
.flow-tab-pane{
  height: 100%;
  width: 100%;
}
</style>